<template>
    <div class="app-container">
        <el-card>
            <div slot="header">
                <span>商品列表</span>
            </div>
            <el-table :data="productList" border style="width: 100%">
                <el-table-column prop="productId" label="商品ID" width="80" />
                <el-table-column prop="productName" label="商品名称" />
                <el-table-column prop="categoryName" label="分类" width="120" />
                <el-table-column prop="price" label="价格" width="100">
                    <template slot-scope="scope">
                        ¥{{ scope.row.price.toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存" width="80" />
                <el-table-column prop="status" label="状态" width="80">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === '0' ? 'danger' : 'success'">
                            {{ scope.row.status === '0' ? '下架' : '上架' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'ProductList',
    data() {
        return {
            productList: [
                {
                    productId: 1,
                    productName: '商品1',
                    categoryName: '手机',
                    price: 3999.00,
                    stock: 100,
                    status: '1'
                },
                {
                    productId: 2,
                    productName: '商品2',
                    categoryName: '电脑',
                    price: 5999.00,
                    stock: 50,
                    status: '1'
                },
                {
                    productId: 3,
                    productName: '商品3',
                    categoryName: '配件',
                    price: 299.00,
                    stock: 200,
                    status: '1'
                }
            ]
        }
    },
    methods: {
        handleEdit(row) {
            this.$message.success('编辑商品：' + row.productName)
        },
        handleDelete(row) {
            this.$message.success('删除商品：' + row.productName)
        }
    }
}
</script>